<template>
  <div class="slider">
    <ul class="container"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
      :style="{ width: items.length * 100 + '%',
      transition: isTouchEnd ? 'all 0.3s' : 'all 0s',
      transform: isTouchEnd ? 'translateX(' + this.idx * this.oWidth + 'px)'
               : 'translateX(' + this.currentX + 'px)' }">
      <div class="list"
           v-for="(item, _idx) in items"
           :ref="'box_' + _idx">
        <!--<img :src="item"
            :style="{ height: _idx === -idx ? scaleX + '%' : 100 + '%', 
                      width: _idx === -idx ? scaleX + '%' : 100 + '%',
                      transform: 'scale(' + (scaleX) / 100 + ', ' + (scaleX) / 100 + ')' }">-->
        <img :src="item"
            :style="{ transform: 'scale(' + scaleX / 100 + ', ' + scaleX / 100 + ') translate3D(' + picX + 'px, ' + picY + 'px, 0)' }">
      </div>
    </ul>
    <div class="mark">
      {{Math.abs(idx) + 1}} / {{items.length}}
      {{Math.floor(scaleX)}}
    </div>
  </div>
</template>

<script>

export default {
  props: {
    items: {
      type: Array,
      default: []
    }
  }, 
  components: {

  },
  data () {
    return {
      startX: 0,
      moveX: 0,
      currentX: 0,
      idx: 0,
      isTouchEnd: true,
      oWidth: document.body.offsetWidth,
      isScale: false,
      touchLen: 0,
      scaleX: 100,
      currentScaleX: 0,
      scaleOne: {
        startX: 0,
        x: 0
      },
      scaleTwo: {
        startX: 0,
        x: 0
      },
      isScroll: false,
      picX: 0,
      picY: 0,
      startPicX: 0,
      startPicY: 0
    }
  },
  methods: {
    touchstart (e) {
      this.touchLen++
      if (this.touchLen === 1) {
        if (this.scaleX === 100) {
          this.isScale = false
          this.isTouchEnd = false
          this.startX = e.touches[0].clientX
        } else {
          this.startPicX = e.touches[0].clientX,
          this.startPicY = e.touches[0].clientY
        }
      } else if (this.touchLen === 2) {
        this.isScale = true
        this.currentX = this.idx * this.oWidth
        this.scaleOne.startX = e.touches[0].clientX
        this.scaleTwo.startX = e.touches[1].clientX
      }
    },
    touchmove (e) {
      if (this.isScale) {
        if (e.touches[0].clientX > e.touches[1].clientX) {
          this.scaleOne.x = e.touches[0].clientX - this.scaleOne.startX
          this.scaleTwo.x = e.touches[1].clientX - this.scaleTwo.startX
        } else {
          this.scaleOne.x = -e.touches[0].clientX + this.scaleOne.startX
          this.scaleTwo.x = -e.touches[1].clientX + this.scaleTwo.startX
        }
        this.scaleX = this.scaleOne.x - this.scaleTwo.x + this.currentScaleX
        if (this.scaleX > 300) this.scaleX = 300
        if (this.scaleX < 100) this.scaleX = 100
        // this.$refs['box_' + this.idx].scrollTop = -20
        // this.$refs['box_' + this.idx].scrollTo(500, 500)
      } else {
        if (this.scaleX > 100 && this.touchLen === 1) {
          this.picX = e.touches[0].clientX - this.startPicX
          this.picY = e.touches[0].clientY - this.startPicY
        } else {
          this.currentX = e.touches[0].clientX - this.startX + this.idx * this.oWidth
          this.moveX = e.touches[0].clientX - this.startX
        }
      }
    },
    touchend (e) {
      this.touchLen = e.changedTouches.length - 1
      if (this.touchLen === 0 && this.isScale === true) {
        this.isScale = false
        this.currentScaleX = this.scaleX
        return
      }
      if (this.isScale) return
      if (this.scaleX > 100) return
      if (Math.abs(this.moveX) > Math.abs(this.oWidth) / 4) {
        if (this.moveX > 0){
          if (this.idx !== 0) this.idx++
        } else {
          if (Math.abs(this.idx) < this.items.length - 1) this.idx--
        }
      }
      this.isTouchEnd = true
      this.currentX = this.idx * this.oWidth
    }
  }, 
  created () {

  }
}
</script>

<style scoped lang="less">
.slider {
  overflow: hidden;
  height: 90%;
  position: fixed;
  bottom: 0;
  align-items: center;
  width: 100%;
  .container {
    height: 100%;
    display: flex;
    align-items: center;
    .list {
      height: 100%;
      width: 100%;
      overflow: scroll;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.mark {
  position: fixed;
  bottom: 5em;
  right: 3em;
  background: rgba(100, 100, 100, 0.6);
  color: white;
  height: 3em;
  width: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
</style>